227880 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

とある日常

とある日常

マス目をヨコにつなげる

■ マス目をヨコにつなげる


マス目をヨコにつなげる
colspan=" 属性値 "

マス目をヨコにつなげるときは「colspan」属性をつかいます。
属性値には「つなげる「マス目」の数」をいれます。

さらに今回は、今までとちがい
「table」にではなく、「td」に属性を合わせています。


たとえばこの例をみてください。


なにも指定しない状態：

●○●
□■□



<table border="1">
<tr><td>●</td><td>○</td><td>●</td></tr>
<tr><td>□</td><td>■</td><td>□</td></tr>
</table>



「<colspan="2">」
としたとき：

●●
□■□



<table border="1">
<tr><td colspan="2">●</td><td>●</td></tr>
<tr><td>□</td><td>■</td><td>□</td></tr>
</table>



「<colspan="3">」
としたとき：

●
□■□



<table border="1">
<tr><td colspan="3">●</td></tr>
<tr><td>□</td><td>■</td><td>□</td></tr>
</table>



「<colspan="5">」
「<colspan="2">」
としたとき：

●
□■□■□
■□■
□



<table border="1">
<tr><td colspan="5">●</td></tr>
<tr><td>□</td><td>■</td><td>□</td><td>■</td><td>□</td></tr>
<tr><td colspan="2">■</td><td colspan="2">□</td><td>■</td></tr>
<tr><td colspan="5">□</td></tr>
</table>




このようにヨコのマス目をつなげることができました。

「td」のかわりに「th」でもつかえます。
同じように「th colspan=""」と入力します。

© Rakuten Group, Inc.